<template>
<view class="container">
	<view class="banner">
		<image src="@/static/fenzu.png" mode="aspectFill"></image>
	</view>
	<view class="header">
		<view class="header-nav">
			<view class="user-info">
				<view class="user-title">
					我吃西红柿
				</view>
				<view class="u-address">
					浙江杭州
				</view>
				<view class="u-age">
					30岁
				</view>
			</view>
			<view class="user_avatar">
				<image src="@/static/fenzu.png" mode=""></image>
			</view>
		</view>
	</view>
<view class="content-con">
	
	<view class="h-content">
		<view class="center-item">
			<image style="width: 44rpx;height: 44rpx;" src="@/static/path(1).svg" mode=""></image>
			<view class="c-message">
				收藏
			</view>
		</view>
		
		<view class="center-item">
			<image style="width: 44rpx;height: 44rpx;" src="@/static/path(2).svg" mode=""></image>
			<view class="c-message">
				地址
			</view>
		</view>
		
		<view class="center-item">
			<image style="width: 44rpx;height: 44rpx;" src="@/static/path(3).svg" mode=""></image>
			<view class="c-message">
				我的
			</view>
		</view>
		
	
		
	</view>
	
	
	<div class="cen-line"></div>
	
	<view class="h-content">
		<view class="center-item">
			<image style="width: 44rpx;height: 44rpx;" src="@/static/path(4).svg" mode=""></image>
			<view class="c-message">
				消息
			</view>
		</view>
		
		<view class="center-item">
			<image style="width: 44rpx;height: 44rpx;" src="@/static/path(5).svg" mode=""></image>
			<view class="c-message">
				设置
			</view>
		</view>
		
		<view class="center-item">
			<image style="width: 44rpx;height: 44rpx;" src="@/static/path(6).svg" mode=""></image>
			<view class="c-message">
				点赞
			</view>
		</view>
		
	
		
	</view>
	
</view>

	<view class="card">
		<view class="c-header">
			<view class="header-left">
				<image src="@/static/avatar.png" mode=""></image>
				<view class="header-text">
				Jerome Gaveau
				</view>
			</view>
			
			<view class="heade-right">
				<image style="width: 43rpx;height: 50rpx;" src="@/static/icons_dots.svg" mode=""></image>
			</view>
		</view>
		
		<view class="c-content">
			When one door of happiness closes,another opens,but often we look so long at the closed door that we do not see the one that has been opened for us
		</view>
		
		<view class="c-footer">
		<view class="footer-item">
			<image style="width: 50rpx;height: 50rpx;" src="@/static/icons_share.svg" mode=""></image>
		</view>
		<view style="font-size: 24rpx;color:#78849E;" class="footer-item">
		254
		</view>
		<view class="footer-item">
			<image style="width: 50rpx;height: 50rpx;" src="@/static/icons_comment.svg" mode=""></image>
		</view>
		<view class="footer-item">
			<image style="width: 43rpx;height: 50rpx;" src="@/static/path.svg" mode=""></image>
		</view>
		</view>
	</view>
	
	
	
	<!-- 测试pinia -->
	
	<view class="tst" style="width: 200rpx;height: 200rpx;background-color: pink;">
		我是pinia测试数据{{store.count}}
		<button @click="store.increment">+</button>
		<button @click="store.decrement">-</button>
	</view>
	
	<view class="img" style="width: 600rpx;
	height: 450rpx; margin: 0 auto;" v-for="item in imgList" :key="item.id">
		<image style="width: 100%;" :src="item.url" mode=""></image>
	</view>
</view>
</template>

<script  setup>
	
	import {useCounterStore} from '@/store/counter.js'
	import {onMounted, ref} from 'vue'
	import userApi from '@/apis/user.js'
	
	const imgList = ref('')
	
	//记得加括号啊
	const store = useCounterStore()
	console.log(store.count)
	
	async function getImg(){
	
			const res = await userApi.login()
			console.log(res.data.data)
			imgList.value = res.data.data
		
	}
	
	onMounted(() => {
		getImg()
	})

</script>

<style scoped lang="scss">

.container{
	.banner{
		width: 750rpx;
		height: 450rpx;
		background-color: aqua;
		image{
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
			
		}
	}
	
	.header{
		width: 720rpx;
		height: 295rpx;
		background-color: #fefefe;
		margin: 0 auto;
		margin-top: 20rpx;
		display: flex;
		.header-nav{
			width: 100%;
			height: 280rpx;
			// background-color: skyblue;
			display: flex;
			padding: 0 55rpx;
			justify-content: space-between;
		
			.user-info{
				.user-title{
					margin-top: 15rpx;
					font-size: 64rpx;
					color: #454F63;
				}
				.u-address,.u-age{
					margin-top: 10rpx;
					font-size: 32rpx;
					color: #78849E;
				}
		
			}
			.user_avatar{
			width: 170rpx;
			height: 170rpx;
			background-color: pink;
			border-radius: 50%;
			margin-top: 35rpx;
		image{
			width: 100%;
			height: 100%;
				border-radius: 50%;
		}
			}
		}
		
	
	}
.content-con{
	width: 700rpx;
	background-color: #fff;
	margin:20rpx auto;
	.cen-line{
		height: 2rpx;
		width: 590rpx;
		background-color: #F4F4F6;
		margin: 0 auto
		
	}
	.h-content{
		width: 700rpx;
		height: 180rpx;
		box-sizing: border-box;
	
		margin: 0 auto;
		padding: 30rpx 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		.center-item{
			display: flex;
			flex-direction: column;
		align-items: center;
			justify-content: space-around;
			.c-message{
				color: #78849E;
				font-size: 26rpx;
			}
		}
	}
}
}


//card

.card{
		width: 686rpx;
		height: 446rpx;
		margin: 0 auto;
		background-color: #fff;
	
	}
	.c-header{
		width: 686rpx;
		height: 120rpx;
		/* background-color: skyblue; */
		box-sizing: border-box;
		padding:0rpx 25rpx;
		margin-top: 25rpx;
		

		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.header-left{
		width: 69%;
		height: 100%;
	/* 	background-color: red; */
		display: flex;
		align-items: center;
	}
	.header-left image{
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: skyblue;
	}
	.heade-right{
		width: 25%;
		height: 100%;
		display: flex;
		justify-content: end;
		margin-right: 25rpx;
		margin-top: 20rpx;
		/* background-color: aqua; */
	}
	.header-text{
		margin-left: 15rpx;
		font-size: 32rpx;
		color: #454F63;
	}
	
	.c-content{
		padding: 20rpx;
		color: #78849E;
		font-size: 28rpx;
		margin-top: 15rpx;
	}
	
	.c-footer{
		margin-top: 40rpx;
		width: 100%;
		height: 85rpx;
		/* background-color: red; */
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
	}
	.footer-item{
		display: flex;
		justify-content:start;
		align-items: center;
		/* background-color: aqua; */
		flex: 1;
	}
</style>
